<script setup lang="ts">
import { WebtopoSvgEdit, WebtopoSvgPreview } from "webtopo-svg-edit";
import "webtopo-svg-edit/dist/style.css";
import { EDoneJsonType, IConfigItem, EConfigItemPropsType } from './config-center/types';
import { ref } from "vue";
const setCustomToolBar = ref({
  测试注入组件: [
    {
      groupType: "element-ui",
      title: "element-ui",
      list: [
        {
          name: "el-button",
          tag: "el-button",
          title: "按钮",
          type: "Vue",
          config: {
            can_zoom: true,
            have_anchor: true,
            actual_rect: true,
          },
          display: true,
          props: {
            size: {
              title: "尺寸",
              type: "Select",
              val: "default",
              options: [
                {
                  label: "大",
                  value: "large",
                },
                {
                  label: "默认",
                  value: "default",
                },
                {
                  label: "小",
                  value: "small",
                },
              ],
            },
            type: {
              title: "类型",
              type: "Select",
              val: "primary",
              options: [
                {
                  label: "主要按钮",
                  value: "primary",
                },
                {
                  label: "成功按钮",
                  value: "success",
                },
                {
                  label: "警告按钮",
                  value: "warning",
                },
                {
                  label: "危险按钮",
                  value: "danger",
                },
                {
                  label: "信息按钮",
                  value: "info",
                },
              ],
            },
            plain: {
              title: "朴素按钮",
              type: "Switch",
              val: false,
            },
            text: {
              title: "文字按钮",
              type: "Switch",
              val: false,
            },
          },
          tag_slot: "按钮",
        },
      ],
    },
    {
      groupType: "custom-vue",
      title: "自定义",
      list: [
        {
          name: "hello-world",
          title: "自带组件",
          tag: "hello-world",
          type: "Vue",
          config: {
            can_zoom: true,
            have_anchor: true,
            actual_rect: true,
          },
          display: true,
          props: {
            msg: {
              title: "msg",
              type: "Input",
              val: "你好，咬轮猫",
            },
          },
        },

        {
          name: 'pie-charts',
          tag: 'pie-charts',
          title: '饼图',
          type: EDoneJsonType.Vue,
          config: {
            can_zoom: true,
            have_anchor: true,
            actual_rect: true
          },
          display: true,
          props: {
            title: {
              title: '标题',
              type: EConfigItemPropsType.Input,
              val: '默认标题'
            },
            seriesName: {
              title: '详情',
              type: EConfigItemPropsType.Input,
              val: '详情标题'
            },
            seriesData: {
              title: 'legendData',
              type: EConfigItemPropsType.JsonEdit,
              val: [
                {
                  value: 1048,
                  name: '办公楼A'
                },
                {
                  value: 735,
                  name: '办公楼B'
                },
                {
                  value: 580,
                  name: '保安室'
                },
                {
                  value: 484,
                  name: '地下车库'
                },
                {
                  value: 300,
                  name: '食堂'
                }
              ]
            }
          },
          common_animations: {
            val: '',
            delay: 'delay-0s',
            speed: 'slow',
            repeat: 'infinite'
          }
        },

      ],
    },

    {
      groupType: "svg-file",
      title: "状态",
      list: [
        {
          name: 'circuit-breaker',
          title: '断路器',
          type: EDoneJsonType.File,
          config: {
            can_zoom: true,
            have_anchor: true,
            actual_rect: true
          },
          display: true,
          props: {},
          state: {
            OnOff: {
              title: '开关',
              default: false,
              props: {
                fill: {
                  openVal: '#00ff00',
                  closeVal: '#ff0000'
                },
                'fill-opacity': {
                  openVal: '0',
                  closeVal: '1'
                }
              }
            }
          },
          common_animations: {
            val: '',
            delay: 'delay-0s',
            speed: 'slow',
            repeat: 'infinite'
          }
        },
      ]
    },

    {
      groupType: "svg-file",
      title: "svg文件",
      list: [
        {
          name: "alternator",
          title: "发电机",
          type: "File",
          config: {
            can_zoom: true,
            have_anchor: true,
            actual_rect: true,
          },
          display: true,
          props: {
            fill: {
              title: "填充色",
              type: "Color",
              val: "#00ff00",
            },
          },
          common_animations: {
            val: "",
            delay: "delay-0s",
            speed: "slow",
            repeat: "infinite",
          },
        },
        {
          name: "reservoir",
          title: "水槽",
          type: "File",
          config: {
            can_zoom: true,
            have_anchor: true,
            actual_rect: true,
          },
          display: true,
          props: {
            fill: {
              title: "填充色",
              type: "Color",
              val: "#00ff00",
            },
          },
          common_animations: {
            val: "",
            delay: "delay-0s",
            speed: "slow",
            repeat: "infinite",
          }
        },

        {
          name: 'custom-svg-text',
          title: '文字',
          tag: 'custom-svg-text',
          type: EDoneJsonType.CustomSvg,
          display: true,
          config: {
            can_zoom: true,
            have_anchor: true,
            actual_rect: true
          },
          props: {
            text: {
              title: '文字内容',
              type: EConfigItemPropsType.Input,
              val: '文字'
            },
            fontFamily: {
              title: '字体',
              type: EConfigItemPropsType.Select,
              val: 'Microsoft YaHei',
              options: [
                {
                  value: 'Microsoft YaHei',
                  label: '微软雅黑'
                },
                {
                  value: 'NSimSun',
                  label: '新宋体'
                }
              ]
            },
            fontSize: {
              title: '文字大小',
              type: EConfigItemPropsType.InputNumber,
              val: 15
            },
            fill: {
              title: '文字颜色',
              type: EConfigItemPropsType.Color,
              val: '#FFF200FF'
            }
          },
          common_animations: {
            val: '',
            delay: 'delay-0s',
            speed: 'slow',
            repeat: 'infinite'
          }
        }
      ],
    },
  ],
});

const data_model2 = ref({
  layout_center: {
    x: -29,
    y: 17
  },
  config: {
    background_color: "#fff",
    scale: 1,
    position_center: {
      x: -333,
      y: -113
    },
    svg_position_center: {
      x: 50,
      y: 50
    }
  },
  done_json: [{
    id: "circuit-breaker5AWZnim3r6",
    x: 412,
    y: 154,
    client: {
      x: 412,
      y: 154
    },
    scale_x: 1,
    scale_y: 1,
    rotate: 0,
    actual_bound: {
      x: 23.1640625,
      y: 19.375,
      width: 61.201171875,
      height: 64.033203125
    },
    point_coordinate: {
      tl: {
        x: 381.3994140625,
        y: 121.9833984375
      },
      tc: {
        x: 412,
        y: 121.9833984375
      },
      tr: {
        x: 442.6005859375,
        y: 121.9833984375
      },
      l: {
        x: 381.3994140625,
        y: 154
      },
      r: {
        x: 442.6005859375,
        y: 154
      },
      bl: {
        x: 381.3994140625,
        y: 186.0166015625
      },
      bc: {
        x: 412,
        y: 186.0166015625
      },
      br: {
        x: 442.6005859375,
        y: 186.0166015625
      }
    },
    name: "circuit-breaker",
    title: "\u65AD\u8DEF\u5668",
    type: "File",
    config: {
      can_zoom: !0,
      have_anchor: !0,
      actual_rect: !0
    },
    display: !0,
    props: {},
    state: {
      OnOff: {
        title: "\u5F00\u5173",
        default: !1,
        props: {
          fill: {
            openVal: "#00ff00",
            closeVal: "#ff0000"
          },
          "fill-opacity": {
            openVal: "0",
            closeVal: "1"
          }
        }
      }
    }
  }, {
    id: "circuit-breakerCeyE17C7Ib",
    x: 696,
    y: 144,
    client: {
      x: 696,
      y: 144
    },
    scale_x: 1,
    scale_y: 1,
    rotate: 0,
    actual_bound: {
      x: 23.1640625,
      y: 19.375,
      width: 61.201171875,
      height: 64.033203125
    },
    point_coordinate: {
      tl: {
        x: 665.3994140625,
        y: 111.9833984375
      },
      tc: {
        x: 696,
        y: 111.9833984375
      },
      tr: {
        x: 726.6005859375,
        y: 111.9833984375
      },
      l: {
        x: 665.3994140625,
        y: 144
      },
      r: {
        x: 726.6005859375,
        y: 144
      },
      bl: {
        x: 665.3994140625,
        y: 176.0166015625
      },
      bc: {
        x: 696,
        y: 176.0166015625
      },
      br: {
        x: 726.6005859375,
        y: 176.0166015625
      }
    },
    name: "circuit-breaker",
    title: "\u65AD\u8DEF\u5668",
    type: "File",
    config: {
      can_zoom: !0,
      have_anchor: !0,
      actual_rect: !0
    },
    display: !0,
    props: {},
    state: {
      OnOff: {
        title: "\u5F00\u5173",
        default: !1,
        props: {
          fill: {
            openVal: "#00ff00",
            closeVal: "#ff0000"
          },
          "fill-opacity": {
            openVal: "0",
            closeVal: "1"
          }
        }
      }
    }
  }, {
    id: "straight-lineGUyEi2THVC",
    x: 442.6005859375,
    y: 154,
    client: {
      x: 447,
      y: 158
    },
    scale_x: 1,
    scale_y: 1,
    rotate: 0,
    actual_bound: {
      x: 50,
      y: 50,
      width: 0,
      height: 0
    },
    point_coordinate: {
      tl: {
        x: 442.6005859375,
        y: 154
      },
      tc: {
        x: 442.6005859375,
        y: 154
      },
      tr: {
        x: 442.6005859375,
        y: 154
      },
      l: {
        x: 442.6005859375,
        y: 154
      },
      r: {
        x: 442.6005859375,
        y: 154
      },
      bl: {
        x: 442.6005859375,
        y: 154
      },
      bc: {
        x: 442.6005859375,
        y: 154
      },
      br: {
        x: 442.6005859375,
        y: 154
      }
    },
    name: "connection_line",
    title: "\u8FDE\u63A5\u7EBF",
    type: "ConnectionLine",
    config: {
      can_zoom: !1,
      have_anchor: !1,
      actual_rect: !1
    },
    display: !0,
    props: {
      stroke: {
        title: "\u7EBF\u6761\u989C\u8272",
        type: "Color",
        val: "#ff0000"
      },
      "stroke-width": {
        title: "\u7EBF\u6761\u5BBD\u5EA6",
        type: "InputNumber",
        val: 2
      },
      point_position: {
        title: "\u70B9\u5750\u6807",
        type: "JsonEdit",
        val: [{
          x: 50,
          y: 50
        }, {
          x: 274,
          y: 39
        }]
      }
    },
    animations: {
      type: {
        title: "\u52A8\u753B\u7C7B\u578B",
        type: "Select",
        val: "Electricity",
        options: [{
          label: "\u65E0",
          value: "None"
        }, {
          label: "\u7535\u6D41",
          value: "Electricity"
        }, {
          label: "\u8F68\u8FF9",
          value: "Track"
        }, {
          label: "\u6C34\u73E0",
          value: "WaterDrop"
        }]
      },
      dur: {
        title: "\u6301\u7EED\u65F6\u95F4",
        type: "InputNumber",
        val: 20
      },
      repeatCount: {
        title: "\u5FAA\u73AF\u6B21\u6570",
        type: "Input",
        val: "indefinite",
        disabled: !0
      },
      color: {
        title: "\u989C\u8272",
        type: "Color",
        val: "#0a7ae2"
      },
      reverse: {
        title: "\u53CD\u8F6C\u52A8\u753B",
        type: "Switch",
        val: !1
      }
    },
    bind_anchors: {
      start: {
        type: "Right",
        target_id: "circuit-breaker5AWZnim3r6"
      },
      end: null
    }
  }, {
    id: "straight-lineXORecx5dkM",
    x: 665.3994140625,
    y: 144,
    client: {
      x: 671,
      y: 147
    },
    scale_x: 1,
    scale_y: 1,
    rotate: 0,
    actual_bound: {
      x: 50,
      y: 50,
      width: 0,
      height: 0
    },
    point_coordinate: {
      tl: {
        x: 665.3994140625,
        y: 144
      },
      tc: {
        x: 665.3994140625,
        y: 144
      },
      tr: {
        x: 665.3994140625,
        y: 144
      },
      l: {
        x: 665.3994140625,
        y: 144
      },
      r: {
        x: 665.3994140625,
        y: 144
      },
      bl: {
        x: 665.3994140625,
        y: 144
      },
      bc: {
        x: 665.3994140625,
        y: 144
      },
      br: {
        x: 665.3994140625,
        y: 144
      }
    },
    name: "connection_line",
    title: "\u8FDE\u63A5\u7EBF",
    type: "ConnectionLine",
    config: {
      can_zoom: !1,
      have_anchor: !1,
      actual_rect: !1
    },
    display: !0,
    props: {
      stroke: {
        title: "\u7EBF\u6761\u989C\u8272",
        type: "Color",
        val: "#ff0000"
      },
      "stroke-width": {
        title: "\u7EBF\u6761\u5BBD\u5EA6",
        type: "InputNumber",
        val: 2
      },
      point_position: {
        title: "\u70B9\u5750\u6807",
        type: "JsonEdit",
        val: [{
          x: 50,
          y: 50
        }]
      }
    },
    animations: {
      type: {
        title: "\u52A8\u753B\u7C7B\u578B",
        type: "Select",
        val: "None",
        options: [{
          label: "\u65E0",
          value: "None"
        }, {
          label: "\u7535\u6D41",
          value: "Electricity"
        }, {
          label: "\u8F68\u8FF9",
          value: "Track"
        }, {
          label: "\u6C34\u73E0",
          value: "WaterDrop"
        }]
      },
      dur: {
        title: "\u6301\u7EED\u65F6\u95F4",
        type: "InputNumber",
        val: 20
      },
      repeatCount: {
        title: "\u5FAA\u73AF\u6B21\u6570",
        type: "Input",
        val: "indefinite",
        disabled: !0
      },
      color: {
        title: "\u989C\u8272",
        type: "Color",
        val: "#0a7ae2"
      },
      reverse: {
        title: "\u53CD\u8F6C\u52A8\u753B",
        type: "Switch",
        val: !1
      }
    },
    bind_anchors: {
      start: {
        type: "Left",
        target_id: "circuit-breakerCeyE17C7Ib"
      },
      end: null
    }
  }, {
    id: "alternator8fWE3IfvWE",
    x: 504,
    y: 398,
    client: {
      x: 504,
      y: 398
    },
    scale_x: 1,
    scale_y: 1,
    rotate: 0,
    actual_bound: {
      x: 22.916664123535156,
      y: 22.91666603088379,
      width: 54.16667175292969,
      height: 54.166664123535156
    },
    point_coordinate: {
      tl: {
        x: 476.91666412353516,
        y: 370.9166679382324
      },
      tc: {
        x: 504,
        y: 370.9166679382324
      },
      tr: {
        x: 531.0833358764648,
        y: 370.9166679382324
      },
      l: {
        x: 476.91666412353516,
        y: 398
      },
      r: {
        x: 531.0833358764648,
        y: 398
      },
      bl: {
        x: 476.91666412353516,
        y: 425.0833320617676
      },
      bc: {
        x: 504,
        y: 425.0833320617676
      },
      br: {
        x: 531.0833358764648,
        y: 425.0833320617676
      }
    },
    name: "alternator",
    title: "\u53D1\u7535\u673A",
    type: "File",
    config: {
      can_zoom: !0,
      have_anchor: !0,
      actual_rect: !0
    },
    display: !0,
    props: {
      fill: {
        title: "\u586B\u5145\u8272",
        type: "Color",
        val: "#00ff00"
      }
    }
  }, {
    id: "straight-lineyNa2CGSIjq",
    x: 412,
    y: 186.0166015625,
    client: {
      x: 419,
      y: 187
    },
    scale_x: 1,
    scale_y: 1,
    rotate: 0,
    actual_bound: {
      x: 50,
      y: 50,
      width: 0,
      height: 0
    },
    point_coordinate: {
      tl: {
        x: 412,
        y: 186.0166015625
      },
      tc: {
        x: 412,
        y: 186.0166015625
      },
      tr: {
        x: 412,
        y: 186.0166015625
      },
      l: {
        x: 412,
        y: 186.0166015625
      },
      r: {
        x: 412,
        y: 186.0166015625
      },
      bl: {
        x: 412,
        y: 186.0166015625
      },
      bc: {
        x: 412,
        y: 186.0166015625
      },
      br: {
        x: 412,
        y: 186.0166015625
      }
    },
    name: "connection_line",
    title: "\u8FDE\u63A5\u7EBF",
    type: "ConnectionLine",
    config: {
      can_zoom: !1,
      have_anchor: !1,
      actual_rect: !1
    },
    display: !0,
    props: {
      stroke: {
        title: "\u7EBF\u6761\u989C\u8272",
        type: "Color",
        val: "#ff0000"
      },
      "stroke-width": {
        title: "\u7EBF\u6761\u5BBD\u5EA6",
        type: "InputNumber",
        val: 2
      },
      point_position: {
        title: "\u70B9\u5750\u6807",
        type: "JsonEdit",
        val: [{
          x: 50,
          y: 50
        }, {
          x: 70,
          y: 158
        }, {
          x: 167,
          y: 96
        }, {
          x: 113,
          y: 216
        }, {
          x: 137,
          y: 232
        }]
      }
    },
    animations: {
      type: {
        title: "\u52A8\u753B\u7C7B\u578B",
        type: "Select",
        val: "Track",
        options: [{
          label: "\u65E0",
          value: "None"
        }, {
          label: "\u7535\u6D41",
          value: "Electricity"
        }, {
          label: "\u8F68\u8FF9",
          value: "Track"
        }, {
          label: "\u6C34\u73E0",
          value: "WaterDrop"
        }]
      },
      dur: {
        title: "\u6301\u7EED\u65F6\u95F4",
        type: "InputNumber",
        val: 20
      },
      repeatCount: {
        title: "\u5FAA\u73AF\u6B21\u6570",
        type: "Input",
        val: "indefinite",
        disabled: !0
      },
      color: {
        title: "\u989C\u8272",
        type: "Color",
        val: "#0a7ae2"
      },
      reverse: {
        title: "\u53CD\u8F6C\u52A8\u753B",
        type: "Switch",
        val: !1
      }
    },
    bind_anchors: {
      start: {
        type: "BottomCenter",
        target_id: "circuit-breaker5AWZnim3r6"
      },
      end: null
    }
  }, {
    id: "straight-line5N22jllLwB",
    x: 504,
    y: 370.9166679382324,
    client: {
      x: 506,
      y: 369
    },
    scale_x: 1,
    scale_y: 1,
    rotate: 0,
    actual_bound: {
      x: 50,
      y: 50,
      width: 0,
      height: 0
    },
    point_coordinate: {
      tl: {
        x: 504,
        y: 370.9166679382324
      },
      tc: {
        x: 504,
        y: 370.9166679382324
      },
      tr: {
        x: 504,
        y: 370.9166679382324
      },
      l: {
        x: 504,
        y: 370.9166679382324
      },
      r: {
        x: 504,
        y: 370.9166679382324
      },
      bl: {
        x: 504,
        y: 370.9166679382324
      },
      bc: {
        x: 504,
        y: 370.9166679382324
      },
      br: {
        x: 504,
        y: 370.9166679382324
      }
    },
    name: "connection_line",
    title: "\u8FDE\u63A5\u7EBF",
    type: "ConnectionLine",
    config: {
      can_zoom: !1,
      have_anchor: !1,
      actual_rect: !1
    },
    display: !0,
    props: {
      stroke: {
        title: "\u7EBF\u6761\u989C\u8272",
        type: "Color",
        val: "#ff0000"
      },
      "stroke-width": {
        title: "\u7EBF\u6761\u5BBD\u5EA6",
        type: "InputNumber",
        val: 2
      },
      point_position: {
        title: "\u70B9\u5750\u6807",
        type: "JsonEdit",
        val: [{
          x: 50,
          y: 50
        }]
      }
    },
    animations: {
      type: {
        title: "\u52A8\u753B\u7C7B\u578B",
        type: "Select",
        val: "None",
        options: [{
          label: "\u65E0",
          value: "None"
        }, {
          label: "\u7535\u6D41",
          value: "Electricity"
        }, {
          label: "\u8F68\u8FF9",
          value: "Track"
        }, {
          label: "\u6C34\u73E0",
          value: "WaterDrop"
        }]
      },
      dur: {
        title: "\u6301\u7EED\u65F6\u95F4",
        type: "InputNumber",
        val: 20
      },
      repeatCount: {
        title: "\u5FAA\u73AF\u6B21\u6570",
        type: "Input",
        val: "indefinite",
        disabled: !0
      },
      color: {
        title: "\u989C\u8272",
        type: "Color",
        val: "#0a7ae2"
      },
      reverse: {
        title: "\u53CD\u8F6C\u52A8\u753B",
        type: "Switch",
        val: !1
      }
    },
    bind_anchors: {
      start: {
        type: "TopCenter",
        target_id: "alternator8fWE3IfvWE"
      },
      end: null
    }
  }, {
    id: "traction-transformer4utrZz4hIc",
    x: 803,
    y: 326,
    client: {
      x: 803,
      y: 326
    },
    scale_x: 1,
    scale_y: 1,
    rotate: 0,
    actual_bound: {
      x: 35.416664123535156,
      y: 22.916667938232422,
      width: 26.858333587646484,
      height: 54.16874313354492
    },
    point_coordinate: {
      tl: {
        x: 789.5708332061768,
        y: 298.91562843322754
      },
      tc: {
        x: 803,
        y: 298.91562843322754
      },
      tr: {
        x: 816.4291667938232,
        y: 298.91562843322754
      },
      l: {
        x: 789.5708332061768,
        y: 326
      },
      r: {
        x: 816.4291667938232,
        y: 326
      },
      bl: {
        x: 789.5708332061768,
        y: 353.08437156677246
      },
      bc: {
        x: 803,
        y: 353.08437156677246
      },
      br: {
        x: 816.4291667938232,
        y: 353.08437156677246
      }
    },
    name: "traction-transformer",
    title: "\u7275\u5F15\u53D8",
    type: "File",
    config: {
      can_zoom: !0,
      have_anchor: !0,
      actual_rect: !0
    },
    display: !0,
    props: {
      fill: {
        title: "\u586B\u5145\u8272",
        type: "Color",
        val: "#ff0000"
      }
    }
  }, {
    id: "straight-lineRNS1ttG2xy",
    x: 696,
    y: 176.0166015625,
    client: {
      x: 696,
      y: 176.0166015625
    },
    scale_x: 1,
    scale_y: 1,
    rotate: 0,
    actual_bound: {
      x: 50,
      y: 50,
      width: 0,
      height: 0
    },
    point_coordinate: {
      tl: {
        x: 617,
        y: 20.5166015625
      },
      tc: {
        x: 696,
        y: 20.5166015625
      },
      tr: {
        x: 775,
        y: 20.5166015625
      },
      l: {
        x: 617,
        y: 176.0166015625
      },
      r: {
        x: 775,
        y: 176.0166015625
      },
      bl: {
        x: 617,
        y: 331.5166015625
      },
      bc: {
        x: 696,
        y: 331.5166015625
      },
      br: {
        x: 775,
        y: 331.5166015625
      }
    },
    name: "connection_line",
    title: "\u8FDE\u63A5\u7EBF",
    type: "ConnectionLine",
    config: {
      can_zoom: !1,
      have_anchor: !1,
      actual_rect: !1
    },
    display: !0,
    props: {
      stroke: {
        title: "\u7EBF\u6761\u989C\u8272",
        type: "Color",
        val: "#ff0000"
      },
      "stroke-width": {
        title: "\u7EBF\u6761\u5BBD\u5EA6",
        type: "InputNumber",
        val: 2
      },
      point_position: {
        title: "\u70B9\u5750\u6807",
        type: "JsonEdit",
        val: [{
          x: 50,
          y: 50
        }, {
          x: 204,
          y: 47
        }, {
          x: 46,
          y: 291
        }, {
          x: 188,
          y: 358
        }]
      }
    },
    animations: {
      type: {
        title: "\u52A8\u753B\u7C7B\u578B",
        type: "Select",
        val: "WaterDrop",
        options: [{
          label: "\u65E0",
          value: "None"
        }, {
          label: "\u7535\u6D41",
          value: "Electricity"
        }, {
          label: "\u8F68\u8FF9",
          value: "Track"
        }, {
          label: "\u6C34\u73E0",
          value: "WaterDrop"
        }]
      },
      dur: {
        title: "\u6301\u7EED\u65F6\u95F4",
        type: "InputNumber",
        val: 20
      },
      repeatCount: {
        title: "\u5FAA\u73AF\u6B21\u6570",
        type: "Input",
        val: "indefinite",
        disabled: !0
      },
      color: {
        title: "\u989C\u8272",
        type: "Color",
        val: "#0a7ae2"
      },
      reverse: {
        title: "\u53CD\u8F6C\u52A8\u753B",
        type: "Switch",
        val: !1
      }
    },
    bind_anchors: {
      start: {
        type: "BottomCenter",
        target_id: "circuit-breakerCeyE17C7Ib"
      },
      end: null
    }
  }, {
    id: "reservoirrFSCTkvgJx",
    x: 838,
    y: 529,
    client: {
      x: 838,
      y: 529
    },
    scale_x: 1,
    scale_y: 1,
    rotate: 0,
    actual_bound: {
      x: 8.310546875,
      y: 12.607422828674316,
      width: 83.37890625,
      height: 76.37694549560547
    },
    point_coordinate: {
      tl: {
        x: 796.310546875,
        y: 490.81152725219727
      },
      tc: {
        x: 838,
        y: 490.81152725219727
      },
      tr: {
        x: 879.689453125,
        y: 490.81152725219727
      },
      l: {
        x: 796.310546875,
        y: 529
      },
      r: {
        x: 879.689453125,
        y: 529
      },
      bl: {
        x: 796.310546875,
        y: 567.1884727478027
      },
      bc: {
        x: 838,
        y: 567.1884727478027
      },
      br: {
        x: 879.689453125,
        y: 567.1884727478027
      }
    },
    name: "reservoir",
    title: "\u84C4\u6C34\u6C60",
    type: "File",
    config: {
      can_zoom: !0,
      have_anchor: !0,
      actual_rect: !0
    },
    display: !0,
    props: {
      fill: {
        title: "\u6C34\u6D41\u989C\u8272",
        type: "Color",
        val: "#37cfe7"
      },
      stroke: {
        title: "\u8FB9\u6846\u989C\u8272",
        type: "Color",
        val: "#000"
      }
    }
  }, {
    id: "pie-chartsAKReNdbYgt",
    x: 1174,
    y: 355,
    client: {
      x: 1174,
      y: 355
    },
    scale_x: 4.26,
    scale_y: 1,
    rotate: 0,
    actual_bound: {
      x: 0,
      y: -150,
      width: 100,
      height: 400
    },
    point_coordinate: {
      tl: {
        x: 266.62,
        y: 155
      },
      tc: {
        x: 1174,
        y: 155
      },
      tr: {
        x: 2081.38,
        y: 155
      },
      l: {
        x: 266.62,
        y: 355
      },
      r: {
        x: 2081.38,
        y: 355
      },
      bl: {
        x: 266.62,
        y: 555
      },
      bc: {
        x: 1174,
        y: 555
      },
      br: {
        x: 2081.38,
        y: 555
      }
    },
    name: "pie-charts",
    tag: "pie-charts",
    title: "\u997C\u56FE",
    type: "Vue",
    config: {
      can_zoom: !0,
      have_anchor: !0,
      actual_rect: !0
    },
    display: !0,
    props: {
      title: {
        title: "\u6807\u9898",
        type: "Input",
        val: "\u9ED8\u8BA4\u6807\u9898"
      },
      seriesName: {
        title: "\u8BE6\u60C5",
        type: "Input",
        val: "\u8BE6\u60C5\u6807\u9898"
      },
      seriesData: {
        title: "legendData",
        type: "JsonEdit",
        val: [{
          value: 1048,
          name: "\u529E\u516C\u697CA"
        }, {
          value: 735,
          name: "\u529E\u516C\u697CB"
        }, {
          value: 580,
          name: "\u4FDD\u5B89\u5BA4"
        }, {
          value: 484,
          name: "\u5730\u4E0B\u8F66\u5E93"
        }, {
          value: 300,
          name: "\u98DF\u5802"
        }]
      }
    }
  }]
});

const data_model = ref({
  layout_center: { x: 0, y: 0 },
  config: {
    background_color: "#fff",
    scale: 1,
    position_center: { x: -333, y: -113 },
    svg_position_center: { x: 50, y: 50 },
    grid: true,
    ruler: true
  },
  done_json: [
    {
      id: "el-buttonAfTY1bUEts",
      x: 398,
      y: 172,
      client: { x: 398, y: 172 },
      scale_x: 1,
      scale_y: 1,
      rotate: 0,
      actual_bound: { x: 20, y: 34, width: 60, height: 32 },
      point_coordinate: {
        tl: { x: 368, y: 156 },
        tc: { x: 398, y: 156 },
        tr: { x: 428, y: 156 },
        l: { x: 368, y: 172 },
        r: { x: 428, y: 172 },
        bl: { x: 368, y: 188 },
        bc: { x: 398, y: 188 },
        br: { x: 428, y: 188 },
      },
      name: "el-button",
      tag: "el-button",
      title: "按钮",
      type: "Vue",
      config: { can_zoom: true, have_anchor: true, actual_rect: true },
      display: true,
      props: {
        size: {
          title: "尺寸",
          type: "Select",
          val: "default",
          options: [
            { label: "大", value: "large" },
            { label: "默认", value: "default" },
            { label: "小", value: "small" },
          ],
        },
        type: {
          title: "类型",
          type: "Select",
          val: "primary",
          options: [
            { label: "主要按钮", value: "primary" },
            { label: "成功按钮", value: "success" },
            { label: "警告按钮", value: "warning" },
            { label: "危险按钮", value: "danger" },
            { label: "信息按钮", value: "info" },
          ],
        },
        plain: { title: "朴素按钮", type: "Switch", val: false },
        text: { title: "文字按钮", type: "Switch", val: false },
      },
      tag_slot: "按钮",
    },
    {
      id: "el-buttonU0llZFtfrF",
      x: 895,
      y: 289,
      client: { x: 895, y: 289 },
      scale_x: 1,
      scale_y: 1,
      rotate: 0,
      actual_bound: { x: 20, y: 34, width: 60, height: 32 },
      point_coordinate: {
        tl: { x: 865, y: 273 },
        tc: { x: 895, y: 273 },
        tr: { x: 925, y: 273 },
        l: { x: 865, y: 289 },
        r: { x: 925, y: 289 },
        bl: { x: 865, y: 305 },
        bc: { x: 895, y: 305 },
        br: { x: 925, y: 305 },
      },
      name: "el-button",
      tag: "el-button",
      title: "按钮",
      type: "Vue",
      config: { can_zoom: true, have_anchor: true, actual_rect: true },
      display: true,
      props: {
        size: {
          title: "尺寸",
          type: "Select",
          val: "default",
          options: [
            { label: "大", value: "large" },
            { label: "默认", value: "default" },
            { label: "小", value: "small" },
          ],
        },
        type: {
          title: "类型",
          type: "Select",
          val: "primary",
          options: [
            { label: "主要按钮", value: "primary" },
            { label: "成功按钮", value: "success" },
            { label: "警告按钮", value: "warning" },
            { label: "危险按钮", value: "danger" },
            { label: "信息按钮", value: "info" },
          ],
        },
        plain: { title: "朴素按钮", type: "Switch", val: false },
        text: { title: "文字按钮", type: "Switch", val: false },
      },
      tag_slot: "按钮",
    },
    {
      id: "alternatoreXUIcBOP4U",
      x: 685,
      y: 456,
      client: { x: 685, y: 456 },
      scale_x: 1,
      scale_y: 1,
      rotate: 0,
      actual_bound: {
        x: 22.916664123535156,
        y: 22.91666603088379,
        width: 54.16667175292969,
        height: 54.166664123535156,
      },
      point_coordinate: {
        tl: { x: 657.9166641235352, y: 428.9166679382324 },
        tc: { x: 685, y: 428.9166679382324 },
        tr: { x: 712.0833358764648, y: 428.9166679382324 },
        l: { x: 657.9166641235352, y: 456 },
        r: { x: 712.0833358764648, y: 456 },
        bl: { x: 657.9166641235352, y: 483.0833320617676 },
        bc: { x: 685, y: 483.0833320617676 },
        br: { x: 712.0833358764648, y: 483.0833320617676 },
      },
      name: "alternator",
      title: "发电机",
      type: "File",
      config: { can_zoom: true, have_anchor: true, actual_rect: true },
      display: true,
      props: { fill: { title: "填充色", type: "Color", val: "#00ff00" } },
      common_animations: {
        val: "",
        delay: "delay-0s",
        speed: "slow",
        repeat: "infinite",
      },
    },
  ],
});

const import_model = ref(
  JSON.stringify({
    layout_center: {
      x: 0,
      y: 0,
    },
    config: {
      background_color: "#fff",
      scale: 1,
      position_center: {
        x: -333,
        y: -113,
      },
      svg_position_center: {
        x: 50,
        y: 50,
      },
    },
    done_json: [
      {
        id: "el-buttonAfTY1bUEts",
        x: 398,
        y: 172,
        client: {
          x: 398,
          y: 172,
        },
        scale_x: 1,
        scale_y: 1,
        rotate: 0,
        actual_bound: {
          x: 20,
          y: 34,
          width: 60,
          height: 32,
        },
        point_coordinate: {
          tl: {
            x: 368,
            y: 156,
          },
          tc: {
            x: 398,
            y: 156,
          },
          tr: {
            x: 428,
            y: 156,
          },
          l: {
            x: 368,
            y: 172,
          },
          r: {
            x: 428,
            y: 172,
          },
          bl: {
            x: 368,
            y: 188,
          },
          bc: {
            x: 398,
            y: 188,
          },
          br: {
            x: 428,
            y: 188,
          },
        },
        name: "el-button",
        tag: "el-button",
        title: "按钮",
        type: "Vue",
        config: {
          can_zoom: true,
          have_anchor: true,
          actual_rect: true,
        },
        display: true,
        props: {
          size: {
            title: "尺寸",
            type: "Select",
            val: "default",
            options: [
              {
                label: "大",
                value: "large",
              },
              {
                label: "默认",
                value: "default",
              },
              {
                label: "小",
                value: "small",
              },
            ],
          },
          type: {
            title: "类型",
            type: "Select",
            val: "primary",
            options: [
              {
                label: "主要按钮",
                value: "primary",
              },
              {
                label: "成功按钮",
                value: "success",
              },
              {
                label: "警告按钮",
                value: "warning",
              },
              {
                label: "危险按钮",
                value: "danger",
              },
              {
                label: "信息按钮",
                value: "info",
              },
            ],
          },
          plain: {
            title: "朴素按钮",
            type: "Switch",
            val: false,
          },
          text: {
            title: "文字按钮",
            type: "Switch",
            val: false,
          },
        },
        tag_slot: "按钮",
      },
    ],
  })
);
const onReturn = () => {
  console.log("点击了返回按钮");
};
const onPreview = (data_model: any) => {
  console.log(JSON.stringify(data_model));
  console.log("点击了预览按钮，可以在此处跳转到预览页", data_model);
};
const onSave = (data_model: any) => {
  console.log("点击了保存按钮，可以在此处将图存到数据库", data_model);
};
</script>

<template>

  <WebtopoSvgEdit @on-return="onReturn" @on-preview="onPreview" @on-save="onSave" :custom-tool-bar="setCustomToolBar"
    :data-model="import_model"></WebtopoSvgEdit>

  <!-- <WebtopoSvgPreview :data-model="data_model2" :canvas-drag="true"></WebtopoSvgPreview> -->

</template>

<style scoped></style>
